<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<view class="title" >当前地址: {{currentAddress}}</view>
		</view>
		
		<view class="text-area">
			<view style="margin-top:15px;" class="title" @click="goChooseCity">选择城市</view>
		</view>
		
		<view class="text-area">
			<view style="margin-top:15px;" class="title" @click="chooseAddress">选择地点</view>
		</view>
		
		
	</view>
</template>

<script>
	const citySelector = requirePlugin('citySelector');
	const chooseLocation = requirePlugin('chooseLocation');
	let QQMapWX = require('../../utils/map/qqmap-wx-jssdk.js');
	let qqmapsdk;
	export default {
		data() {
			return {
				currentAddress:'---',
				currentLocation:'---',
				mapKey:"",// 腾讯地图申请的key值
			}
		},
		onLoad() {
			// 初始化地图实例
			qqmapsdk = new QQMapWX({
				key: this.mapKey
			});
			this.getUserLocation()
		},	
		onShow() {
		    const selectedCity = citySelector.getCity(); // 选择城市后返回城市信息对象，若未选择返回null
			if(selectedCity){
				console.log('城市选择信息>>');
				console.log(selectedCity);
			}
			
			const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
			if(location){
				console.log('地点选择信息>>');
				console.log(location);
			}
			
			
		 },
		 onUnload () {
		    // 页面卸载时清空插件数据，防止再次进入页面，getCity返回的是上次的结果
		    citySelector.clearCity();
		},
		methods: {
			goChooseCity(){
				const key = this.mapKey; // 使用在腾讯位置服务申请的key
				const referer = 'pluginUse'; // 调用插件的app的名称
				const hotCitys = '广州,北京'; // 用户自定义的的热门城市
				wx.navigateTo({
				  url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
			})
			},
			chooseAddress(){
				const _this = this;
				const key = _this.mapKey; //使用在腾讯位置服务申请的key
				const referer = 'pluginUse'; //调用插件的app的名称
				const location = JSON.stringify({
				  latitude: _this.currentLocation.location.lat,
				  longitude: _this.currentLocation.location.lng
				});
				const category = '购物,娱乐休闲';
				
				wx.navigateTo({
				  url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
			});
			},
			getUserLocation() {
				const _this = this;
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						//根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析,前面已引入SDK
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: function(addressRes) {
								console.log('当前地址信息>>>');
								console.log(addressRes);
								_this.currentAddress = addressRes.result.address;
								_this.currentLocation = addressRes.result;
							}
						})
					},
					fail: function(err) {
						//! 说明用户拒绝了首次的获取地理位置
						_this.locName = "获取失败";
					}
			})
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
